@import '~antd/es/style/variable.less';

@layout-background-color: @border-color-base;

.settingContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  :global {
    .ant-tabs {
      height: 100%;
      .ant-tabs-nav-list {
        padding-left: 12px;
        .ant-tabs-tab {
          padding: 6px 0;
        }
      }
      .ant-tabs-content-holder {
        padding: 0 12px 12px;
        overflow-y: auto;
      }
    }
  }
  .settingContainerContent {
    display: flex;
    flex-direction: column;
    .pageSettingLayout {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;
      color: @text-color-secondary;
      .pageSettingLayoutMarginLeft {
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 116px;
        line-height: 116px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateY(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: @layout-background-color;
          transform: translate(-16px, -15px) rotate(45deg);
          content: '';
        }
        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: @layout-background-color;
          transform: translate(-16px, 15px) rotate(-45deg);
          content: '';
        }
      }
      .pageSettingLayoutMarginTop {
        position: absolute;
        top: 0;
        left: 50%;
        width: 214px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateX(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-left-color: @layout-background-color;
          transform: translate(-14px, -16px) rotate(-45deg);
          content: '';
        }
        &:after {
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-right-color: @layout-background-color;
          transform: translate(14px, -16px) rotate(45deg);
          content: '';
        }
      }
      .pageSettingLayoutMarginRight {
        position: absolute;
        top: 50%;
        right: 0;
        width: 20px;
        height: 116px;
        line-height: 116px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateY(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: @layout-background-color;
          transform: translate(6px, -15px) rotate(-45deg);
          content: '';
        }
        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: @layout-background-color;
          transform: translate(6px, 15px) rotate(45deg);
          content: '';
        }
      }
      .pageSettingLayoutMarginBottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 214px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateX(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: @layout-background-color;
          transform: translate(-14px, 6px) rotate(-45deg);
          content: '';
        }
        &:after {
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-right-color: @layout-background-color;
          transform: translate(14px, 6px) rotate(-45deg);
          content: '';
        }
      }
      .pageSettingLayoutPaddingLeft {
        position: absolute;
        top: 50%;
        left: 24px;
        width: 20px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateY(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-top-color: @layout-background-color;
          transform: translate(-14px, -14px) rotate(45deg);
          content: '';
        }
        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-bottom-color: @layout-background-color;
          transform: translate(-14px, 14px) rotate(-45deg);
          content: '';
        }
      }
      .pageSettingLayoutPaddingTop {
        position: absolute;
        top: 24px;
        left: 50%;
        width: 164px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateX(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-left-color: @layout-background-color;
          transform: translate(-14px, -14px) rotate(-45deg);
          content: '';
        }
        &:after {
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-right-color: @layout-background-color;
          transform: translate(14px, -14px) rotate(45deg);
          content: '';
        }
      }
      .pageSettingLayoutPaddingRight {
        position: absolute;
        top: 50%;
        right: 24px;
        width: 20px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateY(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-top-color: @layout-background-color;
          transform: translate(6px, -14px) rotate(-45deg);
          content: '';
        }
        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-bottom-color: @layout-background-color;
          transform: translate(6px, 14px) rotate(45deg);
          content: '';
        }
      }
      .pageSettingLayoutPaddingBottom {
        position: absolute;
        bottom: 24px;
        left: 50%;
        width: 164px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: @layout-background-color;
        transform: translateX(-50%);
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-top-color: @layout-background-color;
          transform: translate(-14px, 6px) rotate(-45deg);
          content: '';
        }
        &:after {
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          border: 14px solid transparent;
          border-right-color: @layout-background-color;
          transform: translate(14px, 6px) rotate(-45deg);
          content: '';
        }
      }
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        font-weight: 500;
        font-size: 12px;
        content: 'Margin';
      }
      &:after {
        position: absolute;
        top: 24px;
        left: 24px;
        z-index: 1;
        font-weight: 500;
        font-size: 12px;
        content: 'Padding';
      }
    }
  }
}
